<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
		<style type="text/css">
			body{padding: 10px 30px;}
			.hide{display:none}
		</style>
	</head>
	<body>
		<blockquote class="layui-elem-quote">所有监听数据请打开控制台查看</blockquote>
		
		<button class="layui-btn layui-btn-primary up-all">全部收起</button>
		<button class="layui-btn layui-btn-primary down-all">全部展开</button>
		<button class="layui-btn layui-btn-primary get-checked">获取选中</button>
		
		<table class="layui-table layui-form" id="test-tree-table"></table>
		
		<script type="text/javascript" src="layui/layui.js"></script>
		<script type="text/javascript">
			layui.config({
				base: 'js/',
			})
			layui.use(['treetable','form'],function(){
				var data=[{"id":1,"pid":0,"title":"1-1"},{"id":2,"pid":0,"title":"1-2"},{"id":3,"pid":0,"title":"1-3"},{"id":4,"pid":1,"title":"1-1-1"},{"id":5,"pid":1,"title":"1-1-2"},{"id":6,"pid":2,"title":"1-2-1"},{"id":7,"pid":2,"title":"1-2-3"},{"id":8,"pid":3,"title":"1-3-1"},{"id":9,"pid":3,"title":"1-3-2"},{"id":10,"pid":4,"title":"1-1-1-1"},{"id":11,"pid":4,"title":"1-1-1-2"}];
				var o = layui.$,treetable = layui.treetable;
				var form = layui.form,layer = layui.layer;
				treetable.render({
					elem: '#test-tree-table',
					data: data,
					field: 'title',
					is_checkbox: true,
					checked:[1,2,3,4],
					/*icon_val: {
						open: "&#xe619;",
						close: "&#xe61a;"
					},
					space: 4,*/
					cols: [
						{
							field: 'title',
							title: '标题',
							width: '30%',
							template: function(item){
								if(item.level == 1){
									return '<span style="color:red;">'+item.title+'</span>';
								}
								if(item.level == 2){
									return '<span style="color:green;">'+item.title+'</span>';
								}
								return item.title;
							}
						},
						{
							field: 'id',
							title: 'ID',
							width: '20%'
						},
						{
							title: '状态',
							width: '20%',
							template: function(item){
								return '<input type="checkbox" lay-skin="switch" lay-filter="status" lay-text="开启|关闭">';
							}
						},
						{
							field: 'pid',
							title: '父ID',
							width: '20%',
						},
						{
							field: 'actions',
							title: '操作',
							width: '30%',
							template: function(item){
								var tem = [];
								if(item.pid == 0){
									tem.push('<a class="add-child" lay-filter="add">添加子级</a>');
								}
								tem.push('<a lay-filter="edit">编辑</a>');
								if(item.pid > 0){
									tem.push('<a class="set-attr">设置属性</a>');
								}
								return tem.join(' <font>|</font> ')
							},
						},
					]
				});
				
				treetable.on('treetable(add)',function(data){
					layer.msg('添加操作');
					console.dir(data);
				})
				
				treetable.on('treetable(edit)',function(data){
					layer.msg('编辑操作');
					console.dir(data);
				})
				
				o('.up-all').click(function(){
					treetable.all('up');
				})
				
				o('.down-all').click(function(){
					treetable.all('down');
				})
				
				o('.get-checked').click(function(){
					console.dir(treetable.all('checked'));
				})
				
				form.on('switch(status)',function(data){
					layer.msg('监听状态操作');
					console.dir(data);
				})
			})
		</script>
	</body>
</html>
